<template>
    <div class="app-container">
        <el-dialog :title="title" :visible="visible" width="600px" @close="handleClose">
            <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" >
                <el-form-item label="资产类型:" prop="assetType">
                    <el-select filterable v-model="form.assetType" placeholder="请选择" clearable
                        :style="{ width: inputWidth }">
                        <el-option v-for="item in assetTypeList" :key="item.id" :label="item.value" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="申请发放账户:" prop="platformWalletType">
                    <el-select filterable v-model="form.platformWalletType" placeholder="请选择" clearable
                        :style="{ width: inputWidth }">
                        <el-option v-for="item in platformWalletTypeList" :key="item.id" :label="item.value" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="申请数量:" prop="applyAmount">
                    <el-input type="text" v-model="form.applyAmount" placeholder="请输入"
                        :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="申请目的:" prop="goal">
                    <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 12 }" maxlength="300" placeholder="请填写申请目的"
                    show-word-limit :style="{ width: inputWidth }" v-model="form.goal" >
                    </el-input>
                </el-form-item>
                <el-form-item label="申请人:" prop="">
                    <div>{{userName}}</div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm" :loading="submitLoading">保存</el-button>
                <el-button @click="handleClose">取消</el-button>
                <!-- <el-button @click="imitateView" v-if="form.id!=''">分红模拟</el-button> -->
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
addAssetApply
} from "@/api/integralOperation/integralAirdrop";
import { mapGetters } from 'vuex'
export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    components: {},
    props: {
        visible: Boolean,
        pathType: String,
    },
    computed: {
    ...mapGetters([
      'userName',
    ])
  },
    data() {
        var checkBonusMoney = (rule, value, callback) => {
            var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
            if (value === '') {
                callback(new Error('请输入申请数量'));
            } else if (!reg.test(value) || value == '0.00' || value == '0.0') {
                callback(new Error('请输入大于0的数值，最多保留两位小数'));
            } else {
                callback()
            }
        };
        return {
            labelWidth: '120px',
            inputWidth: '400px',
            submitLoading: false,
            // 是否禁用表单
            disabled: false,
            // 弹出层标题
            title: "申请商户积分",
            //分红类型
            assetTypeList: [
                { id: '3', value: '商户积分' },
            ],
            platformWalletTypeList:[
               { id: '1', value: '商户积分账户' },
            ],
            // 表单参数
            form: {
                assetType: '3', //资产类型
                platformWalletType: '1', //申请发放账户
                applyAmount: '',//申请数量
                goal: '',//申请目的
            },
            // 表单校验
            rules: {
                assetType: [{
                    required: true,
                    message: "请选择资产类型",
                    trigger: ["blur", "change"]
                }],
                platformWalletType: [{
                    required: true,
                    message: "请选择申请发放账户",
                    trigger: ["blur", "change"]
                }],
                applyAmount: [{
                    required: true,
                    validator: checkBonusMoney,
                    trigger: ['blur', 'change']
                }],
                goal: [{
                    required: true,
                    message: "请填写申请目的",
                    trigger: ["blur", "change"]
                }],
            },
        };
    },
    created() {

    },
    methods: {
        //取消
        handleClose(formName) {
            this.$emit('update:visible', false)
            // this.$refs[formName].resetFields();
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    let data = {
                        ...this.form
                    }
                    this.submitLoading = true
                    addAssetApply(data).then(response => {
                        this.$message.success('新增成功');
                        setTimeout(() => {
                            this.$emit('success')
                            this.handleClose()
                            this.submitLoading = false
                        }, 1000)
                    }).catch(() => {
                        this.submitLoading = false
                    })
               }
            });
        },
        // 分红模拟
        imitateView() {
            this.$refs.imitateDialogRef.open(this.form.id);
        },
    }
};

</script>

<style scoped>
.img_box {
    width: 100px;
    height: 70px;
    border-radius: 4px;
}

.flex {
    display: flex;
}
</style>